<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- 表单项 -->
      <el-form-item label="登录账号" prop="code">
        <el-input v-model="queryParams.code" placeholder="请输入登录账号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="真实姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入真实姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="接单状态" prop="settingsStatus">
        <el-radio-group v-model="queryParams.settingsStatus" @change="handleQuery">
          <el-radio :label="null">全部</el-radio>
          <el-radio :label="0">接单中</el-radio>
          <el-radio :label="1">休息中</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="账号状态" prop="status">
        <el-radio-group v-model="queryParams.status" @change="handleQuery">
          <el-radio :label="null">全部</el-radio>
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="1">冻结</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="providerList" @selection-change="handleSelectionChange" style="width: 100%">

      <el-table-column label="真实姓名" align="center" prop="name" width="120" />
      <el-table-column label="登录账号" align="center" prop="code" width="230" />
      <el-table-column label="身份证号" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.workerCertificationAuditList[0] ? scope.row.workerCertificationAuditList[0].idCardNo : "" }}
        </template>
      </el-table-column>
      <el-table-column label="服务城市" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.workerCertificationAuditList[0] ? scope.row.workerCertificationAuditList[0].citiesServed : "" }}
        </template>
      </el-table-column>
      <el-table-column label="接单状态" align="center" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.settingsStatus === 0 ? 'success' : 'info'">
            {{ scope.row.settingsStatus === 0 ? "接单中" : "休息中" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="账号状态" align="center" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 0 ? 'success' : 'danger'">
            {{ scope.row.status === 0 ? "正常" : "冻结" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="认证时间" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.workerCertificationAuditList[0] ? scope.row.workerCertificationAuditList[0].updateTime : "" }}
        </template>
      </el-table-column>
      <el-table-column label="账号冻结原因" align="center" prop="accountLockReason" width="210" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleToggleStatus(scope.row)">
            {{ scope.row.status === 0 ? "冻结" : "解冻" }}
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 冻结账号弹出层 -->
    <el-dialog :visible.sync="dialogVisible" title="操作确认" width="30%">
      <p v-if="currentAction === 'freeze'">确定要冻结账号吗？</p>
      <p v-if="currentAction === 'unfreeze'">确定要解冻账号吗？</p>
      <el-form :model="form" v-if="currentAction === 'freeze'">
        <el-form-item label="冻结原因" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.accountLockReason" placeholder="请输入冻结原因" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitToggleStatus">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listProvider, updateProvider } from "@/api/provider/provider";
import Pagination from '@/components/Pagination';

export default {
  name: "Provider",
  components: {
    Pagination
  },
  data() {
    return {
      showSearch: true,
      loading: true,
      providerList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null,
        status: null,
        settingsStatus: null,
      },
      dialogVisible: false,
      currentAction: "",
      form: {
        id: null,
        accountLockReason: "",
        status: 0, // 默认状态为正常
        settingsStatus: 0, // 默认接单状态为接单中
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listProvider(this.queryParams).then((response) => {
        this.providerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.queryParams.status = null;
      this.queryParams.settingsStatus = null;
      this.handleQuery();
    },
    handleToggleStatus(row) {
      this.form.id = row.id;
      this.currentAction = row.status === 0 ? "freeze" : "unfreeze";
      this.dialogVisible = true;
      if (this.currentAction === "freeze") {
        this.form.accountLockReason = "";
      } else {
        this.form.accountLockReason = row.accountLockReason;
      }
    },
    submitToggleStatus() {
      this.form.status = this.currentAction === "freeze" ? 1 : 0;
      updateProvider(this.form)
        .then(() => {
          this.$message.success(
            this.currentAction === "freeze" ? "账号冻结成功" : "账号解冻成功"
          );
          this.dialogVisible = false;
          this.getList();
        })
        .catch(() => {
          this.$message.error("操作失败");
        });
    },
    handleView(row) {
      this.$router.push({
        name: "infodetail",
        params: { id: row.id },
      });
    },
  },
};
</script>

<style scoped>
.status-active {
  color: #67c23a;
  font-weight: bold;
}

.status-inactive {
  color: #f56c6c;
  font-weight: bold;
}
</style>